<template>
	<view class="content">
		<!-- 列表 -->
		<view>
			<view style="margin: 30rpx 20rpx;padding: 40rpx 20rpx;background: #FFF;">
				<view style="height: 200px;margin: 10rpx;">
					<image :src="'http://117.72.17.9/file' + activity.cover"
						style="width: 100%;height: 100%;border-radius: 6rpx;"></image>
				</view>
				<view class="title1">
					{{activity.name}}
				</view>
				<view class="title2">
					{{activity.details}}
				</view>
				<view class="title3">
					活动地址： {{activity.location}}
				</view>
				<view style="margin-top: 20rpx;">
					<button type="primary"  @click="inputDialogToggle">立即预约</button>
				</view>
			</view>
		</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="联系号码" placeholder="请输入号码"
					@confirm="confirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { getActivity } from '@/api/maincode/activity'
	import { addActivityReservation } from '@/api/maincode/reservation'
	export default {
		data() {
			return {
				activity: {},
				date:{}
			}
		},
		methods: {
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			confirm(phone) {
				console.log(phone);
				if(phone == undefined || phone.length !=11){
					uni.showModal({ title: '错误信息', content: "请输入11位号码",  showCancel: false  })
					return
				}  
				this.date.phone = phone
				this.date.activityId = this.activity.id
				addActivityReservation(this.date).then(res=>{
					console.log(res);
					uni.showLoading({
						title: '提交成功'
					}) 
					setTimeout(() => {
						uni.hideLoading()  
						this.$refs.inputDialog.close()
					}, 2000)
				}) 
			},
			getActivitys(id) {
				getActivity(id).then(res => {

					this.activity = res.data
					console.log(this.activity.details);
				});
			},

		},
		onLoad: function(option) {
			this.getActivitys(option.activityId);
		}
	}
</script>

<style>
	view {
		font-size: 14px;
		line-height: inherit;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.title1 {
		font-size: 28rpx;
		margin: 20rpx 10rpx 0 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 600;
		line-height: 1.5em;
	}

	.title2 {
		font-size: 24rpx;
		margin: 20rpx 10rpx 0 10rpx;
		line-height: 1.5em;
		white-space: pre-wrap;
	}

	.title3 {
		font-size: 26rpx;
		margin: 20rpx 10rpx 0 10rpx;
		line-height: 1.5em;
		white-space: pre-wrap;
		font-weight: 600;
	}
</style>